<template>
  <div class="wrap">
    <div class="wrap-box">
      <div class="wrap-box-num">
        <p>月交易</p>
        <span>{{ count.value }}</span>
      </div>
      <div class="wrap-box-num">
        <p>月交易额</p>
        <span>{{ money.value }}</span>
      </div>
      <div class="wrap-box-num">
        <p>好评率</p>
        <span>{{ highComment.percent }}</span>
      </div>
      <div class="wrap-box-num">
        <p>差评</p>
        <span>{{ lowComment.value }}</span>
      </div>
      <div class="wrap-box-num">
        <p>投诉</p>
        <span>{{ complaint.value }}</span>
      </div>
    </div>
    <h2>服务统计</h2>
    <div class="wrap-chart">
      <div class="wrap-chart-lt">
        <bar-gradient
          name="countOrderByType"
          :data="countOrderByType"
          :extend="{ langed: false }"
        />
      </div>
      <div class="wrap-chart-rt">
        <pie-simple
          name="countShopByType"
          :data="countShopByType"
          :extend="{
            legend: true,
            radius: ['40%', '60%'],
          }"
        />
        <span v-if="num > 0">{{ num }}家<br /><em>服务商</em></span>
      </div>
    </div>
  </div>
</template>
<script>
import barGradient from '@c/echarts/bar-gradient'
import pieSimple from '@c/echarts/pie-simple'
export default {
  components: { barGradient, pieSimple },
  data() {
    return {
      count: {},
      money: {},
      highComment: {},
      lowComment: {},
      complaint: {},
      countOrderByType: {
        categories: [],
        series: [],
      },
      countShopByType: [],
      num: 0,
    }
  },
  created() {
    this.countOrderCountList()
    this.countOrderMoneyList()
    this.countCommentList()
    this.countComplaintList()
    this.countOrderByTypeList()
    this.countShopByTypeList()
  },
  methods: {
    countOrderCountList() {
      //月交易
      this.$axios.get('/count/bigscreent3/countOrderCount').then((data) => {
        this.count = {}
        if (data.code == 200) {
          this.count = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    countOrderMoneyList() {
      //月交易额
      this.$axios.get('/count/bigscreent3/countOrderMoney').then((data) => {
        this.money = {}
        if (data.code == 200) {
          this.money = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    countCommentList() {
      //好评率 差评
      this.$axios.get('/count/bigscreent3/countComment').then((data) => {
        this.highComment = {}
        this.lowComment = {}
        if (data.code == 200) {
          let { highComment, lowComment } = data.data
          this.highComment = highComment
          this.lowComment = lowComment
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    countComplaintList() {
      //投诉
      this.$axios.get('/count/bigscreent3/countComplaint').then((data) => {
        this.complaint = {}
        if (data.code == 200) {
          this.complaint = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    countOrderByTypeList() {
      this.$axios.get('/count/bigscreent3/countOrderByType').then((data) => {
        this.countOrderByType = { categories: [], series: [] }
        if (data.code == 200) {
          const categories = [],
            series = []
          data.data.forEach((element) => {
            categories.push(element.name)
            series.push(element.value)
          })
          this.countOrderByType = {
            categories: categories,
            series: [
              {
                name: '服务统计',
                data: series,
              },
            ],
          }
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    countShopByTypeList() {
      this.$axios.get('/count/bigscreent3/countShopByType').then((data) => {
        this.countShopByType = []
        this.num = 0
        if (data.code == 200) {
          this.num = data.data.count
          data.data.data.forEach((element) => {
            this.countShopByType.push({
              name: element.name,
              value: element.percent,
            })
          })
        } else {
          this.$message.error(data.msg)
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.wrap {
  &-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 20px;
    margin: 20px 0;
    &-num {
      border-radius: 4px;
      border: 1px solid #ebeef5;
      color: #303133;
      padding: 15px 25px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      p {
        font-size: 16px;
        font-weight: 400;
        color: #b1b1b1;
        margin-bottom: 10px;
      }
      span {
        font-size: 32px;
        font-weight: 400;
        color: #000000;
      }
    }
  }
  h2 {
    font-size: 18px;
    color: #333;
    font-weight: bold;
    padding: 20px 0 0 20px;
  }
  &-chart {
    display: flex;
    margin-top: -30px;
    &-lt {
      flex: 1;
    }
    &-rt {
      width: (100% / 3);
      position: relative;
      span {
        position: absolute;
        left: 50%;
        top: 55%;
        transform: translate(-50%, -50%);
        text-align: center;
        em {
          font-size: 12px;
          color: #b1b1b1;
        }
      }
    }
  }
}
</style>
